import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:tender_flutter/constant/resource_path.dart';
import 'package:tender_flutter/constant/theme_colors.dart';
import 'package:tender_flutter/http/api_response.dart';
import 'package:tender_flutter/page/home/api/api_home.dart';
import 'package:tender_flutter/page/home/model/combo_top_entity.dart';
import 'package:tender_flutter/router/router.dart';
import 'package:tender_flutter/utils/screen_adaper.dart';
import 'package:tender_flutter/widgets/progress_indicator.dart';

class PlaceTopComboDialog extends StatefulWidget {
  @override
  _PlaceTopComboDialogState createState() => _PlaceTopComboDialogState();
}

class _PlaceTopComboDialogState extends State<PlaceTopComboDialog> {
  Future _future;

  /// 选中的套餐Index
  int selectComboIndex = 0;

  /// 套餐数据
  List<ComboTopEntity> _comboDatas;

  /// 获取套餐
  Future<ApiResponse<List<ComboTopEntity>>> _getComboData() async {
    return await ApiHome.getPlaceTopCombo<List<ComboTopEntity>>();
  }

  FutureBuilder<ApiResponse<List<ComboTopEntity>>> _buildFutureBuilder() {
    return FutureBuilder(
        future: _future,
        builder: (BuildContext context,
            AsyncSnapshot<ApiResponse<List<ComboTopEntity>>> snapshot) {
          if (snapshot.hasData) {
            _comboDatas = snapshot.data.result;
            return _initComboList();
          } else {
            return Progressindicator();
          }
        });
  }

  @override
  void initState() {
    super.initState();
    _future = _getComboData();
  }

  @override
  Widget build(BuildContext context) {
    return _initBody();
  }

  Widget _initBody() {
    return Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
            child: Container(
          width: ScreenAdapter.width(650),
          child: Column(mainAxisSize: MainAxisSize.min, children: [
            Align(
              alignment: Alignment.topRight,
              child: IconButton(
                  onPressed: () {
                    LRouter.navigatorCtx(context).pop(context);
                  },
                  icon: Image.asset(RPath.imgPath + "icon_dialog_close.png",
                      fit: BoxFit.contain,
                      width: ScreenAdapter.width(60),
                      height: ScreenAdapter.width(60))),
            ),
            Container(
              padding:
                  EdgeInsets.symmetric(horizontal: ScreenAdapter.width(30)),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: ExactAssetImage(
                      RPath.imgPath + "img_place_top_combo_bg.png"),
                ),
              ),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Column(children: [
                    SizedBox(height: ScreenAdapter.height(100)),
                    _buildFutureBuilder(),
                    // SizedBox(height: ScreenAdapter.height(30)),
                    Text(
                      "你的选择没有错，在这里你将赢得无限商机",
                      style: TextStyle(
                          color: ThemeColors.colorType14,
                          fontSize: ScreenAdapter.sp(28),
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: ScreenAdapter.height(30)),
                    FlatButton(
                        onPressed: () {
                          LRouter.navigatorCtx(context)
                              .pop(_comboDatas[selectComboIndex]);
                        },
                        height: ScreenAdapter.height(87),
                        minWidth: double.infinity,
                        color: ThemeColors.colorType6,
                        child: Text(
                          "立即购买",
                          style: TextStyle(
                            color: ThemeColors.colorWhite,
                            fontSize: ScreenAdapter.sp(32),
                          ),
                        )),
                    SizedBox(height: ScreenAdapter.height(50))
                  ]),
                ],
              ),
            ),
          ]),
        )));
  }

  Widget _initComboList() {
    return GridView.builder(
        itemCount: _comboDatas.length,
        padding: EdgeInsets.symmetric(vertical: ScreenAdapter.height(40)),
        //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: _comboDatas.length,
            //纵轴间距
            mainAxisSpacing: ScreenAdapter.height(15),
            //横轴间距
            crossAxisSpacing: ScreenAdapter.width(15),
            //子组件宽高长度比例
            childAspectRatio: 1.5),
        itemBuilder: (BuildContext context, int index) {
          return _getSetMealCell(index);
        });
  }

  /// 套餐Cell
  Widget _getSetMealCell(int index) {
    ComboTopEntity entity = _comboDatas[index];
    return GestureDetector(
        onTap: () {
          setState(() {
            selectComboIndex = index;
          });
        },
        child: Container(
          padding: EdgeInsets.only(
              top: ScreenAdapter.height(20), bottom: ScreenAdapter.height(20)),
          decoration: BoxDecoration(
            image: index == selectComboIndex
                ? DecorationImage(
                    image: ExactAssetImage(
                        RPath.imgPath + "img_place_top_item_select.png",
                        scale: 2),
                    fit: BoxFit.fill)
                : null,
            // index == selectComboIndex ?
            border: Border.all(
              color: index == selectComboIndex
                  ? ThemeColors.colorType30
                  : ThemeColors.colorType34,
              width: 1,
            ),
            borderRadius: BorderRadius.circular(ScreenAdapter.width(20)),
            color: index == selectComboIndex
                ? ThemeColors.colorType35
                : ThemeColors.colorWhite,
          ),
          child: Stack(
            // crossAxisAlignment: CrossAxisAlignment.center,
            alignment: Alignment.center,
            children: <Widget>[
              Positioned(
                  top: 0,
                  child: RichText(
                      text: TextSpan(
                          text: '¥  ',
                          style: TextStyle(
                              fontSize: ScreenAdapter.sp(25),
                              color: ThemeColors.colorType30,
                              fontWeight: FontWeight.bold),
                          children: [
                        TextSpan(
                          text: entity.money.toString() + '\n',
                          style: TextStyle(
                              fontSize: ScreenAdapter.sp(38),
                              color: ThemeColors.colorType30,
                              fontWeight: FontWeight.bold),
                          // children: <TextSpan>[
                          //   TextSpan(
                          //       text: '  ¥ 298',
                          //       style: TextStyle(
                          //         decoration: TextDecoration.lineThrough,
                          //         fontSize: ScreenAdapter.sp(24),
                          //         color: ThemeColors.colorType31,
                          //       )),
                          // ],
                        )
                      ]))),
              Divider(height: 1),
              Positioned(
                  bottom: 0,
                  child: Container(
                      // height: ScreenAdapter.height(50),
                      alignment: Alignment.center,
                      child: Text(
                        entity.title.toString(),
                        style: TextStyle(
                            fontSize: ScreenAdapter.sp(28),
                            color: ThemeColors.colorType32,
                            fontWeight: FontWeight.w600),
                      )))
            ],
          ),
        ));
  }
}
